<template>
  <swiper :circular="circular"
          :current="swiperItemIndex"
          :indicator-dots="debug"
          @animationfinish="animationfinish"
          @change="onSwiperItemChange">
    <swiper-item>
      <slot name="content0"></slot>
    </swiper-item>

    <swiper-item>
      <slot name="content1"></slot>
    </swiper-item>

    <swiper-item>
      <slot name="content2"></slot>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  props: ['debug', 'height'],
  data() {
    return {
      circular: true,
      swiperItemIndex: 0
    };
  },
  created() {
    console.log('created')
  },
  mounted() {
    console.log('mounted')
    // this.list = []
    // this.index = 0
    // this.swiperItemIndex = 0
  },
  methods: {
    json(o) {
      return JSON.stringify(o)
    },

    setData(index, arr) {
      // console.log('setData', arr)
      const list = []
      arr.map((item, i) => {
        list.push({
          data: item,
          index: i
        })
      })
      this.list = list
      this.index = index
      this.renderSwiperItemList('setData')
    },

    changeIndex(index) {
      // console.log('changeIndex', this.index, index, this.index != index)
      if (this.index != index) {
        this.index = index
        this.$emit('change', this.index, 'change')
        this.renderSwiperItemList('changeIndex')
      }
    },

    renderSwiperItemList(from) {
      const swiperItemList = []
      const empty = {index: 'end'}
      if (this.swiperItemIndex === 0) {
        swiperItemList.push(this.list[this.index] || empty)
        swiperItemList.push(this.list[this.index + 1] || empty)
        swiperItemList.push(this.list[this.index - 1] || empty)
      } else if (this.swiperItemIndex === 1) {
        swiperItemList.push(this.list[this.index - 1] || empty)
        swiperItemList.push(this.list[this.index] || empty)
        swiperItemList.push(this.list[this.index + 1] || empty)
      } else if (this.swiperItemIndex === 2) {
        swiperItemList.push(this.list[this.index + 1] || empty)
        swiperItemList.push(this.list[this.index - 1] || empty)
        swiperItemList.push(this.list[this.index] || empty)
      }

      // console.log('swiperItemList', from, swiperItemList, this.index, this.swiperItemIndex, this.list)
      this.$emit('renderPage', swiperItemList)
    },
    onSwiperItemChange(e) {
      const {current} = e.detail
      // console.log('onSwiperItemChange', current, this.swiperItemIndex, current - this.swiperItemIndex)
      const d = current - this.swiperItemIndex
      const old = this.index
      let fangxiang = null
      if (d === 1 || d === -2) {
        // console.log('右')
        fangxiang = 'right'
        this.index++
      } else if (d === -1 || d === 2) {
        // console.log('左')
        fangxiang = 'left'
        this.index--
      } else {
        console.log(d)
      }

      if (this.index < 0 || this.index >= this.list.length) {
        const back = this.swiperItemIndex
        this.swiperItemIndex = current
        this.$nextTick(() => {
          this.index = old
          this.swiperItemIndex = back
        })
        return
      }
      this.swiperItemIndex = current
      this.$emit('change', this.index, 'gesture')

      setTimeout(() => {
        this.renderSwiperItemList('swipe')
      }, 500)
    },
    animationfinish() {
      // console.error('animationfinish')
    }
  }
}
</script>

<style lang="scss" scoped>
.red {
  color: red;
}
swiper {
  height: 100%;
}
</style>
